<template>
  <div>
    <Upload
      ref="upload"
      :action="url"
      :headers="{ token: $store.state.token }"
      :limit="1"
      type="drag"
      accept="mp3"
      v-show="!audio"
      :show-file-list="false"
      :show-upload-list="true"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
    >
      <div style="padding: 40px 0">
        <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
        <p>点击或拖拽上传3</p>
      </div>
    </Upload>
    <div class="audio" v-show="audio">
      <audio controls :id="musicId" :src="prefix + audio"></audio>
      <div class="top" @click="delAudio">
        <i class="iconfont icon-icon7"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      qiniuData: {
        token: "",
        key: "",
      },
      audio: "",
      url: this.baseUrl + "chongqing/stage/file/uploadQiNiuFile",
      // url: "http://lanproxy.zhoukc.top:40005/ztmuseum/stage/file/uploadQiNiuFile",
    };
  },
  props: {
    audioUrl: String,
    clear: Boolean,
    musicId: String,
  },
  watch: {
    clear: function (data) {
      this.$refs.upload.clearFiles();
      this.audio = "";
    },
    audioUrl: function (data) {
      this.audio = data;
    },
  },
  mounted() {
    // this.getFilePrefix()
    // this.getAccessToken()
    // watch不起作用
    if(this.audioUrl != '') {
      this.audio = this.audioUrl
    }
    this.getAudioTime();
  },
  methods: {
    // 清空
    delAudio() {
      this.audio = "";
      this.$refs.upload.clearFiles();
      this.$emit("uploadAudio", "");
    },
    // 获取上传文件的前缀
    // getFilePrefix(){
    //   this.$http('/stage/file/getFilePrefix',{
    //     museumId: this.$store.state.museumId,
    //   },'get',(res)=>{
    //     if(res.data.code == 200){
    //       this.qiniuData.key = res.data.data
    //     }else{
    //       this.$Message.error(res.data.msg)
    //     }
    //   })
    // },
    // 获取上传文件token
    // getAccessToken(){
    //   this.$http('/stage/file/getAccessToken',{},'get',(res)=>{
    //     if(res.data.code == 200){
    //       this.qiniuData.token = res.data.data
    //     }else{
    //       this.$Message.error(res.data.msg)
    //     }
    //   })
    // },
    // 上传验证
    beforeAvatarUpload(file) {
      // this.getFilePrefix()
      // this.getAccessToken()
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isLt10M) {
        this.$Message.error("上传音频大小不能超过 10MB!");
      }
      return isLt10M;
    },
    // 上传完毕
    handleAvatarSuccess(res, file) {
      console.log(file);
      this.audio = res.data;
      this.$emit("uploadAudio", res.data);
    },
    // 传递时间
    getAudioTime() {
      let _this = this;
      let music = document.getElementById(this.musicId);
      console.log(this.audio);
      console.log(music);
      music.oncanplaythrough = function () {
        _this.$emit("audioLength", music.duration);
      };
    },
  },
};
</script>

<style scoped>
.audio {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.audio audio {
  position: relative;
  width: 450px;
  height: 50px;
}
.top {
  width: 50px;
  height: 50px;
  background-color: #3399ff;
  display: flex;
  color: white;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
}
.top:hover {
  opacity: 0.8;
}
</style>

